<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')" :close-on-click-modal="false" @submit.prevent @keyup.enter="submit">
        <el-form :model="form" :rules="rules" :disabled="mode=='show'"  ref="dialogForm">
            花型: {{form.flower}}
            <el-form-item label="米数" prop="meters">
                <el-input v-model="form.meters" placeholder="请输入米数" clearable ref="metersInput"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit(0)">保存</el-button>
        </template>
    </el-dialog>
</template>

<script>

export default {
    emits: ['success', 'closed'],
    data() {
        return {
            mode: "add",
            titleMap: {
                add: '新增',
                edit: '批量设置码单',
                show: '查看',
            },
            visible: false,
            isSaveing: false,
            form: {
                id: "",
                meters: "",
                flower: "",
                batch: 1
            },
            flower_name: "",
        }
    },
    created() {
        // this.meter_input = this.common.debounce(this.meter_input, 1000);
	},
    mounted() {
        setTimeout(()=>{ 
            this.$refs.metersInput.focus()
        },100)
    },
    methods: {
        //显示
        open(mode = 'add') {
            this.mode = mode;
            this.visible = true;
            return this
        },
        //表单提交方法
        async submit() {
            var res = await this.$API.business.purchase.house.set_meters.post(this.form);
            if (res.code == 1) {
                this.visible = false;
                this.$emit('success', this.form, this.mode)
                this.$message.success("操作成功")
            } else {
                this.$alert(res.message, "提示", {type: 'error'})
            }
        },
        //表单注入数据
        async setData(row,id) {
            this.form.flower = row.flower
            this.form.id = id
        },
        // 数量上
        up(index, field) {
            let prevField = ''
            if (index > 0) {
                prevField = this.$refs[`${field}${index-1}`];
            } else {
                prevField = this.$refs[`${field}${this.data.length-1}`];
            }
            prevField.focus();
            setTimeout(() => {
                prevField.select();
            },0)
        },
        // 数量下
        down(index, field) {
            let prevField = ''
            if (index < this.data.length - 1) {
                prevField = this.$refs[`${field}${index+1}`];
            } else {
                prevField = this.$refs[`${field}${0}`];
            }
            prevField.focus();
            setTimeout(() => {
                prevField.select();
            },0)
        },
        // 计算
        totalComputed(){
            let total = 0;
            this.data.map(item=>{
                total = Number(total) + Number(item.meters);
            })
            this.total = total;
        },
        meter_input(e){
            this.data.map( item =>{
                item.meters = e
            })
            this.totalComputed();
            // this.allMeters = ""
        },

        getFocus(){
            setTimeout(()=>{ 
                this.$nextTick(()=>{
                    this.$refs.meterInput.focus()
                })
            },100)
        },
    }
}
</script>

<style lang="scss" scoped>
:deep(.el-input input[type="number"]::-webkit-outer-spin-button),   
:deep(.el-input input[type="number"]::-webkit-inner-spin-button) {
   -webkit-appearance: none;
   margin: 0;   
}
   
:deep(.el-input input[type="number"]) {
   -moz-appearance: textfield;
}
</style>
